<template>
	<view>
		<view class="nav-bar">
			<view class="bar-text" @click="goBack">
				<view class="align">

				</view>
				<text>返回</text>
			</view>
		</view>
		<view class="group">
			<view class="header">
				<text class="header-text">头像</text>
				<view class="header-img" @click="chooseAvatar">
					<view class="h-img-in">
						<image v-if="avatarUrl ==''" class="img" src="/static/images/camero.png" mode=""></image>
						<image v-if="avatarUrl" style="width: 100%;height: 100%;" :src="avatarUrl" mode="aspectFit">
						</image>
					</view>
				</view>
			</view>
			<view class="name" @click="name">
				<text class="header-text">昵称</text>
				<view class="header-img">
					{{list.nickName}}
				</view>
				<view class="arrow">

				</view>
			</view>
			<picker mode="selector" :range="genders" v-model="selectedGenderIndex" @change="onGenderChange">
				<view class="name">
					<text class="header-text">性别</text>
					<text class="header-img">{{ genders[selectedGenderIndex]}}</text>
					<view class="arrow">
					
					</view>
				</view>
			</picker>
			<view class="name" @click="password">
				<text class="header-text">密码设置</text>
				<view class="header-img">

				</view>
				<view class="arrow">

				</view>
			</view>
			<view class="name">
				<text class="header-text">手机号</text>
				<view class="header-img">
					{{list.mobile}}
				</view>
				<view class="arrow">

				</view>
			</view>
		</view>

		<view class="back" @click="back">
			退出当前账户
		</view>
	</view>
</template>

<script>
	import api from '../../static/request.js'
	export default {
		data() {
			return {
				list: {},
				avatarUrl: '',
				genders: ['男', '女', '未知'],
				selectedGenderIndex: 0
			}
		},
		onLoad() {
			this.getdata()
		},
		methods: {
			password(){
			    uni.navigateTo({
			    	url:'/pages/setPassword/setPassword'
			    })	
			},
			showGenderPicker() {
				this.selectedGenderIndex = this.genders.indexOf(this.list.gender);
			},
			onGenderChange(e) {
				this.profile.gender = this.genders[e.detail.value];
			},
			name() {
				uni.navigateTo({
					url: '/pages/information/setName?name=' + this.list.nickName
				})
			},
			// 头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths;
						this.avatarUrl = tempFilePaths[0]; // 将选中的图片路径赋值给avatarUrl
					},
					fail: (err) => {
						console.error('选择图片失败：', err);
					}
				});
			},
			// 返回
			goBack() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			// 获取数据
			getdata() {
				api.get('auth/info', {}).then(res => {
					console.log(res, '6666');
					this.list = res.data.data;
					console.log(this.list, '6666');
				});
			},
			back() {
				api.post('auth/logout', {}).then(res => {
					console.log(res, '6666');
				});
				uni.switchTab({
					url: '/pages/index/index'
				})
				uni.setStorageSync('Authorization', '')
				uni.setStorageSync('nickName', '')
			}
		}
	}
</script>

<style>
	@import url('information.css');
</style>